<template>
  <div style="padding: 20px 30px;">
    <el-row>
      <el-col :span="showCard==0 ? 24 : 12 ">
        <el-row type="flex" justify="center">
          <div class="amountBox">
            <count-to
            class="amountFont"
              :start-val="0"
              :end-val="userInfo.balance"
              :duration="500"
              :decimals="2"
              separator=","
              prefix="¥ "
              :autoplay="true"
            />
            <p class="pointFont">
              <i class="el-icon-coin"></i>
              <span style="font-size:17px;"> 积分: </span>
              {{userInfo.point}}
            </p>
            <p class="settingFont">
              <el-link icon="el-icon-wallet" :underline="false" @click="openjournalDialog(true)">金额明细</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link icon="el-icon-coin" :underline="false" @click="openjournalDialog(false)">积分明细</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link icon="el-icon-money" :underline="false" @click="beforeOpenShowCard(1)">充值金额</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link icon="el-icon-lock" :underline="false" @click="beforeOpenShowCard(2)">忘记支付密码</el-link>
            </p>
          </div>
        </el-row>

        <el-row style="margin-top:50px;">
          <el-divider content-position="left"><i>密码设置</i></el-divider>
          <el-col :span="showCard==0 ? 8 : 14 ">
            <el-form label-width="110px">
              <el-form-item label="当前密码强度：">
                <el-progress
                style="display: inline;"
                :percentage="percentage"
                :format="format"
                :color="customColors"
                ></el-progress>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="10" :offset="showCard==0 ? 6 : 0">
            <el-row type="flex" justify="end" style="margin-top:3px">
              <el-button size="mini" @click="beforeOpenShowCard(3)">修改密码</el-button>
              <el-button size="mini" @click="beforeOpenShowCard(4)">忘记密码</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-divider content-position="left"><i>邮箱设置</i></el-divider>
          <el-col :span="16">
            <el-form label-width="110px">
              <el-form-item label="当前电子邮箱：">
                {{userInfo.user.email}}
                <el-tag style="margin-left:5px;" v-if="!this.userInfo.user.checkEmail" type='warning' effect='plain' size="mini">
                  <i class="el-icon-warning-outline" /> 未绑定
                </el-tag>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8" >
            <el-row type="flex" justify="end" style="margin-top:3px">
              <el-button :loading="this.showCard==5" v-if="!this.userInfo.user.checkEmail" size="mini" @click="beforeOpenShowCard(5)">
                <span v-if="this.showCard==5" >绑定中</span><span v-else>验证绑定</span>
              </el-button>
              <el-button v-if="this.userInfo.user.checkEmail" size="mini" @click="editUserEmailStatus">解除绑定</el-button>
            </el-row>
          </el-col>
        </el-row>

      </el-col>
      <el-col :v-show="showCard!=0" :span="11" :offset="1">
        <!-- 充值框 -->
        <el-card class="box-card" v-if="showCard==1">
          <div slot="header">
            <span>充值</span>
            <i class="el-icon-close iconButton" @click="closeCard"></i>
          </div>
            <el-form label-position="top" label-width="96px" :model="editPWForm" :rules="editRules">
              <el-form-item prop="confirmNewPassword" label="充值方式">
                <el-radio-group v-model="payWay">
                  <el-radio label="1" border><svg-icon icon-class="Recharge" /> 测试支付</el-radio>
                  <el-radio label="2" border><svg-icon icon-class="Alipay" /> 支付宝</el-radio>
                  <el-radio label="3" border><svg-icon icon-class="wechat" /> 微信支付</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="confirmNewPassword" label="充值金额">
                <el-radio-group v-model="payNum" @input="choicePayNum">
                  <el-row>
                    <el-radio v-for="(item,index) in payItem" :key="index" :label="item.label" border>¥ {{item.num}}</el-radio>
                  </el-row>
                  <el-row style="margin-top:10px">
                    <el-radio v-if="!anyPayNum" label="5" border>其它金额</el-radio>
                    <el-input-number
                      v-if="anyPayNum"
                      ref="anyPayNumRef"
                      v-model="rechargeNum"
                      placeholder="仅限充1000"
                      :controls="false"
                      :precision="2"
                      :style="payNum=='' ? '':'border: 0.5px solid #409EFF;'"
                      style="width:112px;border-radius: 5px;"
                      :min="0"
                      :max="1000"
                    />
                  </el-row>


                </el-radio-group>
              </el-form-item>
              <el-form-item style="text-align: right;">
                <el-button type="success" :disabled="rechargeNum==''||rechargeNum==null||payWay==''" @click="conRecharge">确认充值</el-button>
              </el-form-item>
            </el-form>
        </el-card>

        <!-- 忘记支付密码框 -->
        <el-card class="box-card" v-if="showCard==2">
          <div slot="header">
            <span>重置支付密码</span>
            <i class="el-icon-close iconButton" @click="closeCard"></i>
          </div>
          <el-steps align-center :active="restASPWAction" finish-status="success">
            <el-step title="人机验证"></el-step>
            <el-step title="邮箱验证"></el-step>
            <el-step title="设置密码"></el-step>
            <el-step title="完成重置"></el-step>
          </el-steps>

          <div v-show="restASPWAction==0" style="margin-top:5%">
            <el-row type="flex" justify="center">
              <el-col :span="6" >
                <div>
                  <span @click="getMathCodeImage" style="cursor: pointer;">
                    <el-image :src="codeImage" class="codeImg" />
                  </span>
                </div>
                <div><el-input v-model="restPWCode" placeholder="输入正确结果" /></div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="end">
                <el-button type="primary" @click="checkMathCode">验证</el-button>
            </el-row>
          </div>

          <div v-show="restASPWAction==1" style="margin-top:5%">
            <my-valid-input :type="false" @giveInputValue="getInputValue"></my-valid-input>
            <el-row class="tiptext">请输入邮箱验证码</el-row>
            <el-row v-show="sendEmailLoding" class="tiptext"><i class="el-icon-loading"></i> 正在发送中...</el-row>
            <el-row v-show="!sendEmailLoding" class="tiptext">
              验证码失效？
              <span v-if="sendEmailCodeFlag">请{{emailCodeCountDown}}秒后</span>点击
              <el-link type="primary" @click="sendEmailCode" :disabled="sendEmailCodeFlag">再次发送</el-link>
            </el-row>
            <el-row type="flex" justify="end" style="margin-top:30px">
              <el-button type="primary" @click="checkEmailCode" :disabled="inputValue.length<4">验证</el-button>
            </el-row>
          </div>

          <div v-show="restASPWAction==2" style="margin-top:5%">
            <div v-show="!ASPWPage">
              <my-valid-input :type="true" @giveInputValue="getFirstInputValue" ref="firstASPWInput"></my-valid-input>
              <el-row class="tiptext">请输入新支付密码</el-row>
              <el-row type="flex" justify="end" style="margin-top:30px">
                <el-button @click="cleanInput">清空</el-button>
                <el-button type="primary" @click="ASPWPage=true" :disabled="firstASPWInput.length<6">下一步</el-button>
              </el-row>
            </div>
            <div v-show="ASPWPage">
              <my-valid-input :type="true" @giveInputValue="getSecondInputValue" ref="secondASPWInput"></my-valid-input>
              <el-row class="tiptext">请再次输入确认新支付密码</el-row>
              <el-row v-show="restASPWTip" style="text-align:center;margin-top:4px;font-size:14px;color:#F56C6C;">两次输入密码不一致！</el-row>
              <el-row type="flex" justify="end" style="margin-top:30px">
                <el-button @click="cleanInput">清空</el-button>
                <el-button type="info" @click="ASPWPage=false">上一步</el-button>
                <el-button type="success" @click="confirmEditASPW" :disabled="secondASPWInput.length<6 || restASPWTip">确认</el-button>
              </el-row>
            </div>
          </div>

          <div v-show="restASPWAction==4" style="margin-top:5%">
            <el-result icon="success" title="重置成功" subTitle="牢记密码，切勿泄露。"></el-result>
          </div>
        </el-card>

        <!-- 修改密码框 -->
        <el-card class="box-card" v-if="showCard==3">
          <div slot="header">
            <span>修改密码</span>
            <i class="el-icon-close iconButton" @click="closeCard"></i>
          </div>
          <el-form label-width="96px" :model="editPWForm" ref="editPWFormRef" :rules="editRules">
            <el-form-item prop="oldPassword" label="旧密码：">
              <el-input :type="oldPasswordType" v-model="editPWForm.oldPassword" />
              <span class="show-pwd" @click="showPwd(0)">
                <svg-icon :icon-class="oldPasswordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
            <el-form-item prop="newPassword" label="新密码：">
              <el-input :type="newPasswordType" v-model="editPWForm.newPassword" />
              <span class="show-pwd" @click="showPwd(1)">
                <svg-icon :icon-class="newPasswordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
            <el-form-item prop="confirmNewPassword" label="确认新密码：">
              <el-input :type="checkNewPasswordType" v-model="editPWForm.confirmNewPassword" />
              <span class="show-pwd" @click="showPwd(2)">
                <svg-icon :icon-class="checkNewPasswordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
            <el-form-item style="text-align: right;">
              <el-button @click="clearEditPWForm">清空</el-button>
              <el-button type="primary" @click="confirmEditPW">修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 忘记登录密码框 -->
        <el-card class="box-card" v-if="showCard==4">
          <div slot="header">
            <span>重置登录密码</span>
            <i class="el-icon-close iconButton" @click="closeCard"></i>
          </div>
          <el-steps align-center :active="restPWAction" finish-status="success">
            <el-step title="人机验证"></el-step>
            <el-step title="邮箱验证"></el-step>
            <el-step title="设置密码"></el-step>
            <el-step title="完成重置"></el-step>
          </el-steps>

          <div v-show="restPWAction==0" style="margin-top:5%">
            <el-row type="flex" justify="center">
              <el-col :span="6" >
                <div>
                  <span @click="getMathCodeImage" style="cursor: pointer;">
                    <el-image :src="codeImage" class="codeImg" />
                  </span>
                </div>
                <div><el-input v-model="restPWCode" placeholder="输入正确结果" /></div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="end">
                <el-button type="primary" @click="checkMathCode">验证</el-button>
            </el-row>
          </div>

          <div v-show="restPWAction==1" style="margin-top:5%">
            <my-valid-input :type="false" @giveInputValue="getInputValue"></my-valid-input>
            <el-row class="tiptext">请输入邮箱验证码</el-row>
            <el-row v-show="sendEmailLoding" class="tiptext"><i class="el-icon-loading"></i> 正在发送中...</el-row>
            <el-row v-show="!sendEmailLoding" class="tiptext">
              验证码失效？
              <span v-if="sendEmailCodeFlag">请{{emailCodeCountDown}}秒后</span>点击
              <el-link type="primary" @click="sendEmailCode" :disabled="sendEmailCodeFlag">再次发送</el-link>
            </el-row>
            <el-row type="flex" justify="end" style="margin-top:30px">
              <el-button type="primary" @click="checkEmailCode" :disabled="inputValue.length<4">验证</el-button>
            </el-row>
          </div>

          <div v-show="restPWAction==2" style="margin-top:5%">
            <el-form label-width="96px" :model="editPWForm" ref="editPWFormRef" :rules="editRules">
              <el-form-item prop="newPassword" label="新密码：">
                <el-input :type="newPasswordType" v-model="editPWForm.newPassword" />
                <span class="show-pwd" @click="showPwd(1)">
                  <svg-icon :icon-class="newPasswordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </el-form-item>
              <el-form-item prop="confirmNewPassword" label="确认新密码：">
                <el-input :type="checkNewPasswordType" v-model="editPWForm.confirmNewPassword" />
                <span class="show-pwd" @click="showPwd(2)">
                  <svg-icon :icon-class="checkNewPasswordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </el-form-item>
              <el-form-item style="text-align: right;">
                <el-button @click="clearEditPWForm">清空</el-button>
                <el-button type="success" @click="confirmEditPW">确定</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div v-show="restPWAction==4" style="margin-top:5%">
            <el-result icon="success" title="重置成功" subTitle="牢记密码，切勿泄露。"></el-result>
          </div>
        </el-card>

        <!-- 邮箱绑定框 -->
        <el-card class="box-card" v-if="showCard==5">
          <div slot="header">
            <span>邮箱绑定</span>
            <i class="el-icon-close iconButton" @click="showCard=0"></i>
          </div>
          <div style="margin-top:5%">
              <my-valid-input :type="false" @giveInputValue="getInputValue"></my-valid-input>
              <el-row class="tiptext">请输入邮箱验证码</el-row>
              <el-row v-show="sendEmailLoding" class="tiptext"><i class="el-icon-loading"></i> 正在发送中...</el-row>
              <el-row v-show="!sendEmailLoding" class="tiptext">
                收不到邮箱验证码？
                <span v-if="sendEmailCodeFlag">{{emailCodeCountDown}}秒后</span>点击
                <el-link type="primary" @click="sendEmailCode" :disabled="sendEmailCodeFlag">再次发送</el-link>
              </el-row>
              <el-row type="flex" justify="end" style="margin-top:30px">
                <el-button type="primary" @click="checkEmailCode" :disabled="inputValue.length<4">验证</el-button>
              </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :destroy-on-close="true" top="5vh" :closed="closejournalDialog" :title="journalTitle" :visible.sync="journalDialogVisible" width="46vw">
      <balance-journal v-if="journalType" :aid="userInfo.user.assetId" ref="balanceJournalRef"></balance-journal>
      <point-journal v-if="!journalType" :aid="userInfo.user.assetId" ref="pointJournalRef"></point-journal>
    </el-dialog>
  </div>
</template>

<script>
  import countTo from 'vue-count-to';
  import myValidInput from '@/components/MyValidInput';
  import {
    editUserPWApi,
    editUserEmailStatusApi
  } from "@/api/user";
  import {
    getMathCodeImageApi,
    checkMathCodeApi,
    sendEmailCodeApi,
    checkEmailCodeApi,
  } from "@/api/captcha";
  import { editUserAssetApi } from "@/api/asset"
  import { addRechargeOrdersApi } from "@/api/orders"
  import balanceJournal from './BalanceJournal'
  import pointJournal from './PointJournal'
  export default {
    components: { countTo, myValidInput,balanceJournal,pointJournal },
    props: {
      userInfo: {
        type: Object,
        require: true
      }
    },
    data() {
      var confirmNewPassword = (rule, value, callback) => {
          if(value !== this.editPWForm.newPassword) {
              callback(new Error('两次输入密码不一致！'));
          }else{
              callback();
          }
      };
      return {
        journalTitle:'',
        journalDialogVisible:false,
        journalType:undefined,
        //任意金额
        anyPayNum: false,
        //充值方式
        payWay: "",
        //选择充值金额项
        payNum: "",
        //充值金额项列表
        payItem:[{label:"1",num:10},{label:"2",num:20},{label:"3",num:30},{label:"4",num:50}],
        //真实充值额
        rechargeNum:'',
        //当前位于第几次支付密码页面
        ASPWPage: false,
        //第一次支付密码
        firstASPWInput: "",
        //第二次支付密码
        secondASPWInput: "",
        //验证码输入框值
        inputValue: "",
        //是否已发送验证码
        sendEmailCodeFlag: false,
        //处理发送
        sendEmailLoding: false,
        //获取邮箱验证码到计时
        emailCodeCountDown: 10,
        //当前展示卡片
        showCard: "",
        //四则运算验证码图片
        codeImage:"",
        //重置登录密码步骤
        restPWAction: 0,
        //重置支付密码步骤
        restASPWAction: 0,
        //四则运算输入框
        restPWCode:"",
        //
        editRules: {
          oldPassword: { required: true, trigger: "blur", message: "请填写旧密码" },
          newPassword: { required: true, trigger: "blur", message: "请填写新密码" },
          confirmNewPassword: { validator: confirmNewPassword, trigger: 'blur' },
        },
        oldPasswordType: 'password',
        newPasswordType: 'password',
        checkNewPasswordType: 'password',
        //修改密码表单
        editPWForm: {
          oldPassword: "",
          newPassword: "",
          confirmNewPassword: "",
          checkPassword: ""
        },
        customColors: [
          {color: '#C62828', percentage: 20},
          {color: '#E57373', percentage: 30},
          {color: '#F9A825', percentage: 60},
          {color: '#2196F3', percentage: 80},
          {color: '#AED581', percentage: 100}
        ]
      }
    },
    methods: {
      closejournalDialog(){
        this.journalTitle = '';
        this.journalType = undefined;
        this.journalDialogVisible = false;
      },
      openjournalDialog(type){
        if(type){
          this.journalTitle = '金额明细';
          this.journalType = type;
        }else{
          this.journalTitle = '积分明细';
          this.journalType = type;
        }
        this.journalDialogVisible = true;
      },
      //充值
      async conRecharge(){
        let parm = {
          uid: this.$store.getters.userId,
          cost: this.rechargeNum
        }
        let res = await addRechargeOrdersApi(parm);
        if(res&&res.code==200){
          this.$message.success(res.msg);
          this.closeCard()
          this.$emit("refreshInfo");
        }
      },

      //选择并赋予金额值
      choicePayNum(val){
        switch (val) {
          case "1":
            this.rechargeNum = this.payItem[0].num;
            this.anyPayNum = false;
            break;
          case "2":
            this.rechargeNum = this.payItem[1].num;
            this.anyPayNum = false;
            break;
          case "3":
            this.rechargeNum = this.payItem[2].num;
            this.anyPayNum = false;
            break;
          case "4":
            this.rechargeNum = this.payItem[3].num;
            this.anyPayNum = false;
            break;
          case "5":
            this.anyPayNum = true;
            this.$nextTick(() => {
              this.$refs.anyPayNumRef.focus()
            })
            this.rechargeNum = '';
            break;
          default:
            break;
        }
      },
      //确认重置支付密码
      async confirmEditASPW(){
        let parm = {
          id: this.userInfo.user.assetId,
          assetKey: this.secondASPWInput,
        }
        // TODO
        let res = await editUserAssetApi(parm);
        if (res && res.code == 200) {
          this.restASPWAction=4
          this.$message.success(res.msg);
          setTimeout(() => {
            this.closeCard();
          }, 3000);
        }
      },
      //清空支付密码框
      cleanInput(){
        if(this.ASPWPage){
          this.$refs.secondASPWInput.cleanInput();
        }else{
          this.$refs.firstASPWInput.cleanInput();
        }

      },
      //解绑邮箱
      async editUserEmailStatus(){
        let confirm = await this.$myconfirm("确定解绑邮箱吗？");
        if (confirm) {
          let res = await editUserEmailStatusApi(this.userInfo.user.id)
          if(res && res.code==200){
            this.closeCard();
            this.$emit("refreshInfo");
            this.$message.success(res.msg);
          }
        }
      },
      //验证邮箱验证码,成功则绑定
      async checkEmailCode() {
        let parm = {
          emailCode:this.inputValue,
          sendType:this.showCard,
          id:this.userInfo.user.id
        }
        let res = await checkEmailCodeApi(parm)
        if(res && res.code==200){
          if(this.showCard==5){
            this.closeCard()
            this.$emit("refreshInfo");
            this.$message.success(res.msg);
          }else if(this.showCard==2){
            this.restASPWAction = 2;
          }else if(this.showCard==4){
            this.restPWAction = 2;
          }
        }
      },
      //获取子组件传来的值
      getInputValue(value){
        this.inputValue = value;
      },
      getFirstInputValue(value){
        this.firstASPWInput = value;
      },
      getSecondInputValue(value){
        this.secondASPWInput = value;
      },
      //发送邮箱验证码
      async sendEmailCode(){
        this.sendEmailLoding = true;
        let res =  await sendEmailCodeApi({mailAccount: this.userInfo.user.email,sendType:this.showCard}).catch(()=>{
          this.$message.error("请检查网络是否畅通！");
          this.sendEmailLoding = false;
        })
        if(res && res.code==200){
          this.$message.success("验证码已发送至 "+this.userInfo.user.email);
          this.sendEmailLoding = false;
          //改变邮箱发送标志
          this.sendEmailCodeFlag = true;
        }
      },
      //未绑定邮箱打开提示
      noEmailCheck(num){
        if(this.userInfo.user.checkEmail==0){
          this.$message.warning("请先绑定邮箱！");
        }else if(this.userInfo.user.checkEmail==1){
          this.showCard=num
        }
      },
      //打开右侧卡片前的操作
      beforeOpenShowCard(num){
        switch (num) {
          case 1:
            this.showCard=1;
            break;
          case 2:
            this.noEmailCheck(num);
            this.getMathCodeImage();
            break;
          case 3:
            this.clearEditPWForm();
            this.showCard=3;
            break;
          case 4:
            this.noEmailCheck(num);
            this.getMathCodeImage();
            break;
          case 5:
            this.showCard=5;
            if(!this.sendEmailCodeFlag){
              this.sendEmailCode();
            }
            break;
        }
      },
      //关闭右侧卡片
      closeCard(){
        switch (this.showCard) {
          case 1:
            this.payWay = "";
            this.payNum = "";
            this.anyPayNum = "";
            this.rechargeNum = null;
          break;
          case 2:
            this.restASPWAction=0;
            this.ASPWPage = false;
            this.firstASPWInput="";
            this.secondASPWInput="";
          break;
          case 3:
            this.clearEditPWForm();
          break;
          case 4:
            this.clearEditPWForm();
            this.restPWAction=0;
            this.restPWCode="";
            this.inputValue='';
          break;
          case 5:
            this.inputValue='';
          break;
        }
        this.showCard = 0;
      },
      //验证验证码
      async checkMathCode() {
        let res = await checkMathCodeApi({mathCode:this.restPWCode}).catch(()=>{}).finally(this.restPWCode='',this.getMathCodeImage())
        if(res && res.code==200){
          if(this.showCard==2){
            this.restASPWAction = 1;
            this.sendEmailCode(this.showCard)
          }else if(this.showCard==4){
            this.restPWAction = 1;
            this.sendEmailCode(this.showCard)
          }
        }
      },
      //获取四则运算验证码
      async getMathCodeImage(){
        this.codeImage = await getMathCodeImageApi();
      },
      //密码强度判断
      checkPassword(psw){
        var lv = 0; //初始化提示消息为空
        if (psw.match(/[a-z]/g)) { lv++; } //验证是否包含小写字母
        if (psw.match(/[A-Z]/g)) { lv++; } //验证是否包含大写字母
        if (psw.match(/[0-9]/g)) { lv++; } // 验证是否包含数字
        if (psw.match(/[!@#$%^&*?._-]/g)) { lv++; } //验证是否包含字符
        return lv;
      },
      //提交修改密码表单
      async confirmEditPW(){
        this.$refs.editPWFormRef.validate(async (valid) => {
          if (valid) {
            this.editPWForm.checkPassword = this.checkPassword(this.editPWForm.newPassword);
            let parm = {
              id: this.userInfo.user.id,
              oldPassword: this.editPWForm.oldPassword,
              newPassword: this.editPWForm.newPassword,
              checkPassword: this.editPWForm.checkPassword
            }
            let res = await editUserPWApi(parm);
            if (res && res.code == 200) {
              if(this.showCard==3){
                this.closeCard();
                this.$emit("refreshInfo");
                this.$message.success(res.msg);
              }else if(this.showCard==4){
                this.restPWAction = 4;
                this.$emit("refreshInfo");
                this.$message.success(res.msg);
                setTimeout(() => {
                  this.closeCard();
                }, 3000);
              }
            }
          }
        })
      },
      //清空修改密码表单
      clearEditPWForm(){
        this.$resetForm("editPWFormRef", this.editPWForm);
      },
      //显示密码
      showPwd(flag) {
        if(flag==0){
          if (this.oldPasswordType === 'password') {
            this.oldPasswordType = ''
          } else {
            this.oldPasswordType = 'password'
          }
        }else if(flag==1){
          if (this.newPasswordType === 'password') {
            this.newPasswordType = ''
          } else {
            this.newPasswordType= 'password'
          }
        }else if(flag==2){
          if (this.checkNewPasswordType === 'password') {
            this.checkNewPasswordType = ''
          } else {
            this.checkNewPasswordType= 'password'
          }
        }
      },
      format(percentage) {
        switch(percentage){
          case 10:
            return "高风险";
            break;
          case 25:
            return "弱";
            break;
          case 50:
            return "中";
            break;
          case 75:
            return "较强";
            break;
          case 100:
            return "强";
            break;
          default:
            return "高风险";
            break;
        }
      }
    },
    computed:{
      percentage(){
        switch (this.userInfo.user.checkPassword) {
          case 0:
            return 10;
            break;
          case 1:
            return 25;
            break;
          case 2:
            return 50;
            break;
          case 3:
            return 75;
            break;
          case 4:
            return 100;
            break;
          default:
            return 10;
            break;
        }
      },
      restASPWTip(){
        if(this.secondASPWInput.length==6 && this.firstASPWInput!=this.secondASPWInput){
          return true
        }
        return false
      }
    },
    watch:{
      showCard(val){
        if(val==4){
          this.getMathCodeImage()
        }
      },
      sendEmailCodeFlag(val){
        if(val){
          let sid = setInterval(() => {
            if(this.emailCodeCountDown<=10 && this.emailCodeCountDown>0){
                this.emailCodeCountDown--
            }
          }, 1000);
          setTimeout(() => {
            this.sendEmailCodeFlag = false;
            clearInterval(sid);
          }, 10000);
        }else{
          this.emailCodeCountDown = 10;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .amountBox{
    background-color: #1890ff;
    width: 460px;
    height: 235px;
    border-radius: 16px;
    padding: 0 12px;
    box-shadow: 4px 5px 10px #c7c7c7;
    .amountFont {
      font-size: 66px;
      color: #fff;
      display: block;
      padding: 60px 0 20px 0;
      text-align: center;
      font-weight: 500;
      white-space: nowrap;
    }
    .pointFont{
      font-size: 18px;
      color: #fff;
      text-align: center;
      vertical-align:middle;
      margin: 0;
    }
    .settingFont{
      font-size: 18px;
      margin: 26px 0 0 0;
      text-align: center;
      cursor: pointer;
      .el-link.el-link--default{
        color: #e8e8e8;
        transition:0.2s;
      }
      .el-link.el-link--default:hover{
        color: #fff;
      }
    }
  }
  .iconButton{
    float: right;
    font-size: 20px;
    cursor: pointer;
    transition: 0.2s;
  }

  .iconButton:hover{
    color: #409EFF;
    transition: 0.2s;
  }

  .box-card{
    min-height: 300px;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 1px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }

  .codeImg {
    width: 100%;
    height: 50px;
    padding: 5px 0;
    border: 1px solid #ddd;
  }

  .tiptext{
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #606266;
  }
</style>
